<div class="flex">
  <div class="tools">
    <div *ngFor="let item of tools">
      <div class="title">{{ item.group }}</div>
      <div class="buttons">
        <a
          *ngFor="let button of item.children"
          [title]="button.name"
          [draggable]="button.data"
          (dragstart)="onDrag($event, button)"
          (touchstart)="onTouchstart(button)"
        >
          <i class="iconfont {{ button.icon }}"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="full" #workspace (contextmenu)="onContextMenu($event)"></div>
  <div class="props">
    <div class="pv5">
      <div *ngIf="!selected">
        <div class="title">欢迎使用le5le-topology！</div>
        <div class="ml30 mb20 mt10">
          <a
            href="https://github.com/le5le-com/topology"
            target="_blank"
            class="block mt20 mb15"
            style="color:#f60!important;text-decoration: underline;"
            >喜欢，点击这里打个star吧</a
          >
          <a href="https://www.yuque.com/alsmile/topology" target="_blank"
            >使用教程</a
          ><br />
          <a
            href="http://topology.le5le.com/assets/img/topology_wechat.jpg?t=1"
            target="_blank"
            >微信交流群（大群）</a
          ><br />
          <a
            href="http://topology.le5le.com/assets/img/topology_wechat2.jpg"
            target="_blank"
            >微信交流群2</a
          ><br />
          <a
            href="https://www.yuque.com/alsmile/topology/faq#EVbCgt"
            target="_blank"
            >联系我们</a
          >
        </div>
        <div class="title mt30">[Todo] 未来规划</div>
        <ul class="ml30 mb20 mt10">
          <li>Github issues</li>
          <li>React demo</li>
          <li>Vue3 demo</li>
          <li>系列教程</li>
        </ul>
        <div class="abs" style="bottom:.2rem">
          <div class="title mt30">
            小提示
          </div>
          <ul class="ml30 mb20 mt10">
            <li>方向键：控制节点移动5个像素</li>
            <li>Ctrl + 方向键：控制节点移动1个像素</li>
            <li>Ctrl + 鼠标移动：移动整个画布</li>
            <li>Ctrl + 鼠标滚轮：缩放</li>
            <li>添加或选中节点，右侧属性支持上传各种图片哦</li>
          </ul>
        </div>
      </div>
      <div *ngIf="selected">
        <app-props
          [props]="selected"
          [readonly]="readonly"
          (ok)="onChangeProps($event)"
          (animateChange)="onAnimateChange()"
        ></app-props>
      </div>
    </div>
  </div>
</div>
<app-context-menu
  [contextmenu]="contextmenu"
  [canvas]="canvas"
  [selNodes]="selNodes"
  [selected]="selected"
  [locked]="locked"
></app-context-menu>

<div class="modal" *ngIf="divNode">
  <div class="modal-content">
    <div class="modal-header pointer" uiDivMove [isHead]="true">
      <div class="caption">添加视频/网页</div>
      <i class="fr iconfont icon-close" (click)="divNode = null"></i>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
      <button type="button" class="button mr10" (click)="divNode = null">
        取消
      </button>
      <button type="button" class="button primary" (click)="divNode = null">
        确定
      </button>
    </div>
  </div>
</div>
